<h1>Combobox</h1>

<h2>Default</h2>
<FluentCombobox id="combobox">
    <FluentOption>Please Please Me</FluentOption>
    <FluentOption>With The Beatles</FluentOption>
    <FluentOption>A Hard Day's Night</FluentOption>
    <FluentOption>Beatles for Sale</FluentOption>
    <FluentOption>Help!</FluentOption>
    <FluentOption>Rubber Soul</FluentOption>
    <FluentOption>Revolver</FluentOption>
    <FluentOption>Sgt. Pepper's Lonely Hearts Club Band</FluentOption>
    <FluentOption>Magical Mystery Tour</FluentOption>
    <FluentOption>The Beatles</FluentOption>
    <FluentOption>Yellow Submarine</FluentOption>
    <FluentOption>Abbey Road</FluentOption>
    <FluentOption>Let It Be</FluentOption>
</FluentCombobox>

<h2>Filled</h2>
<FluentCombobox id="combobox" Filled="true">
    <FluentOption>Please Please Me</FluentOption>
    <FluentOption>With The Beatles</FluentOption>
    <FluentOption>A Hard Day's Night</FluentOption>
    <FluentOption>Beatles for Sale</FluentOption>
    <FluentOption>Help!</FluentOption>
    <FluentOption>Rubber Soul</FluentOption>
    <FluentOption>Revolver</FluentOption>
    <FluentOption>Sgt. Pepper's Lonely Hearts Club Band</FluentOption>
    <FluentOption>Magical Mystery Tour</FluentOption>
    <FluentOption>The Beatles</FluentOption>
    <FluentOption>Yellow Submarine</FluentOption>
    <FluentOption>Abbey Road</FluentOption>
    <FluentOption>Let It Be</FluentOption>
</FluentCombobox>

<h2>Default Selected</h2>
<FluentCombobox id="combobox-with-default">
    <FluentOption>William Hartnell</FluentOption>
    <FluentOption>Patrick Troughton</FluentOption>
    <FluentOption>Jon Pertwee</FluentOption>
    <FluentOption>Tom Baker</FluentOption>
    <FluentOption>Peter Davidson</FluentOption>
    <FluentOption>Colin Baker</FluentOption>
    <FluentOption>Sylvester McCoy</FluentOption>
    <FluentOption>Paul McGann</FluentOption>
    <FluentOption>Christopher Eccleston</FluentOption>
    <FluentOption>David Tenant</FluentOption>
    <FluentOption>Matt Smith</FluentOption>
    <FluentOption>Peter Capaldi</FluentOption>
    <FluentOption selected>Jodie Whittaker</FluentOption>
</FluentCombobox>

<h2>Initial Value</h2>
<FluentCombobox id="combobox-with-initial-value" Value="Christopher Eccleston">
    <FluentOption>William Hartnell</FluentOption>
    <FluentOption>Patrick Troughton</FluentOption>
    <FluentOption>Jon Pertwee</FluentOption>
    <FluentOption>Tom Baker</FluentOption>
    <FluentOption>Peter Davidson</FluentOption>
    <FluentOption>Colin Baker</FluentOption>
    <FluentOption>Sylvester McCoy</FluentOption>
    <FluentOption>Paul McGann</FluentOption>
    <FluentOption>Christopher Eccleston</FluentOption>
    <FluentOption>David Tenant</FluentOption>
    <FluentOption>Matt Smith</FluentOption>
    <FluentOption>Peter Capaldi</FluentOption>
    <FluentOption>Jodie Whittaker</FluentOption>
</FluentCombobox>

<h2>Combobox with Autocomplete</h2>

<h3>Inline Autocomplete</h3>
<FluentCombobox id="combobox-with-inline-autocomplete" Autocomplete="Autocomplete.Inline">
    <FluentOption>William Hartnell</FluentOption>
    <FluentOption>Patrick Troughton</FluentOption>
    <FluentOption>Jon Pertwee</FluentOption>
    <FluentOption>Tom Baker</FluentOption>
    <FluentOption>Peter Davidson</FluentOption>
    <FluentOption>Colin Baker</FluentOption>
    <FluentOption>Sylvester McCoy</FluentOption>
    <FluentOption>Paul McGann</FluentOption>
    <FluentOption>Christopher Eccleston</FluentOption>
    <FluentOption>David Tenant</FluentOption>
    <FluentOption>Matt Smith</FluentOption>
    <FluentOption>Peter Capaldi</FluentOption>
    <FluentOption>Jodie Whittaker</FluentOption>
</FluentCombobox>

<h3>List Autocomplete</h3>
<FluentCombobox id="combobox-with-list-autocomplete" Autocomplete="Autocomplete.List">
    <FluentOption>William Hartnell</FluentOption>
    <FluentOption>Patrick Troughton</FluentOption>
    <FluentOption>Jon Pertwee</FluentOption>
    <FluentOption>Tom Baker</FluentOption>
    <FluentOption>Peter Davidson</FluentOption>
    <FluentOption>Colin Baker</FluentOption>
    <FluentOption>Sylvester McCoy</FluentOption>
    <FluentOption>Paul McGann</FluentOption>
    <FluentOption>Christopher Eccleston</FluentOption>
    <FluentOption>David Tenant</FluentOption>
    <FluentOption>Matt Smith</FluentOption>
    <FluentOption>Peter Capaldi</FluentOption>
    <FluentOption>Jodie Whittaker</FluentOption>
</FluentCombobox>

<h3>Both Autocomplete</h3>
<FluentCombobox id="combobox-with-both-autocomplete" Autocomplete="Autocomplete.Both">
    <FluentOption>William Hartnell</FluentOption>
    <FluentOption>Patrick Troughton</FluentOption>
    <FluentOption>Jon Pertwee</FluentOption>
    <FluentOption>Tom Baker</FluentOption>
    <FluentOption>Peter Davidson</FluentOption>
    <FluentOption>Colin Baker</FluentOption>
    <FluentOption>Sylvester McCoy</FluentOption>
    <FluentOption>Paul McGann</FluentOption>
    <FluentOption>Christopher Eccleston</FluentOption>
    <FluentOption>David Tenant</FluentOption>
    <FluentOption>Matt Smith</FluentOption>
    <FluentOption>Peter Capaldi</FluentOption>
    <FluentOption>Jodie Whittaker</FluentOption>
</FluentCombobox>

<h2>Disabled Combobox</h2>
<FluentCombobox Disabled="true">
    <FluentOption>Extra Small</FluentOption>
    <FluentOption>Small</FluentOption>
    <FluentOption>Medium</FluentOption>
    <FluentOption>Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

<h2>Combobox with disabled items</h2>

<h3>Combobox with alternating disabled items</h3>
<FluentCombobox id="combobox-with-every-other-disabled">
    <FluentOption>Extra Small</FluentOption>
    <FluentOption Disabled="true">Small</FluentOption>
    <FluentOption>Medium</FluentOption>
    <FluentOption Disabled="true">Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

<h3>Combobox with adjacent disabled items at start of list</h3>
<FluentCombobox id="combobox-with-adjacent-disabled-start">
    <FluentOption Disabled="true">Extra Small</FluentOption>
    <FluentOption Disabled="true">Small</FluentOption>
    <FluentOption>Medium</FluentOption>
    <FluentOption>Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

<h3>Combobox with adjacent disabled items in middle of list</h3>
<FluentCombobox id="combobox-with-adjacent-disabled-middle">
    <FluentOption>Extra Small</FluentOption>
    <FluentOption Disabled="true">Small</FluentOption>
    <FluentOption Disabled="true">Medium</FluentOption>
    <FluentOption>Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

<h3>Combobox with adjacent disabled items at end of list</h3>
<FluentCombobox id="combobox-with-adjacent-disabled-end">
    <FluentOption>Extra Small</FluentOption>
    <FluentOption>Small</FluentOption>
    <FluentOption>Medium</FluentOption>
    <FluentOption Disabled="true">Large</FluentOption>
    <FluentOption Disabled="true">Extra Large</FluentOption>
</FluentCombobox>

<h3>Combobox with all but one item disabled</h3>
<FluentCombobox id="combobox-with-all-but-one-disabled">
    <FluentOption Disabled="true">Extra Small</FluentOption>
    <FluentOption Disabled="true">Small</FluentOption>
    <FluentOption Disabled="true">Medium</FluentOption>
    <FluentOption Disabled="true">Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

<h3>Combobox with all items disabled</h3>
<FluentCombobox id="combobox-with-all-disabled">
    <FluentOption Disabled="true">Extra Small</FluentOption>
    <FluentOption Disabled="true">Small</FluentOption>
    <FluentOption Disabled="true">Medium</FluentOption>
    <FluentOption Disabled="true">Large</FluentOption>
    <FluentOption Disabled="true">Extra Large</FluentOption>
</FluentCombobox>

<h2>Combobox with placeholder</h2>
<FluentCombobox placeholder="Please select a size" id="combobox-with-placeholder">
    <FluentOption>Extra Small</FluentOption>
    <FluentOption>Small</FluentOption>
    <FluentOption>Medium</FluentOption>
    <FluentOption>Large</FluentOption>
    <FluentOption>Extra Large</FluentOption>
</FluentCombobox>

<h2>Combobox with no items</h2>
<FluentCombobox id="combobox-with-no-items"></FluentCombobox>

<h2>Combobox with long list</h2>
<FluentCombobox id="combobox-with-long-list" Autocomplete="Autocomplete.Both">
    <FluentOption>Alabama</FluentOption>
    <FluentOption>Alaska</FluentOption>
    <FluentOption>Arizona</FluentOption>
    <FluentOption>Arkansas</FluentOption>
    <FluentOption>California</FluentOption>
    <FluentOption>Colorado</FluentOption>
    <FluentOption>Connecticut</FluentOption>
    <FluentOption>Delaware</FluentOption>
    <FluentOption>Florida</FluentOption>
    <FluentOption>Georgia</FluentOption>
    <FluentOption>Hawaii</FluentOption>
    <FluentOption>Idaho</FluentOption>
    <FluentOption>Illinois</FluentOption>
    <FluentOption>Indiana</FluentOption>
    <FluentOption>Iowa</FluentOption>
    <FluentOption>Kansas</FluentOption>
    <FluentOption>Kentucky</FluentOption>
    <FluentOption>Louisiana</FluentOption>
    <FluentOption>Maine</FluentOption>
    <FluentOption>Maryland</FluentOption>
    <FluentOption>Massachussets</FluentOption>
    <FluentOption>Michigain</FluentOption>
    <FluentOption>Minnesota</FluentOption>
    <FluentOption>Mississippi</FluentOption>
    <FluentOption>Missouri</FluentOption>
    <FluentOption>Montana</FluentOption>
    <FluentOption>Nebraska</FluentOption>
    <FluentOption>Nevada</FluentOption>
    <FluentOption>New Hampshire</FluentOption>
    <FluentOption>New Jersey</FluentOption>
    <FluentOption>New Mexico</FluentOption>
    <FluentOption>New York</FluentOption>
    <FluentOption>North Carolina</FluentOption>
    <FluentOption>North Dakota</FluentOption>
    <FluentOption>Ohio</FluentOption>
    <FluentOption>Oklahoma</FluentOption>
    <FluentOption>Oregon</FluentOption>
    <FluentOption>Pennsylvania</FluentOption>
    <FluentOption>Rhode Island</FluentOption>
    <FluentOption>South Carolina</FluentOption>
    <FluentOption>South Dakota</FluentOption>
    <FluentOption>Texas</FluentOption>
    <FluentOption>Tennessee</FluentOption>
    <FluentOption>Utah</FluentOption>
    <FluentOption>Vermont</FluentOption>
    <FluentOption>Virginia</FluentOption>
    <FluentOption>Washington</FluentOption>
    <FluentOption>Wisconsin</FluentOption>
    <FluentOption>West Virginia</FluentOption>
    <FluentOption>Wyoming</FluentOption>
</FluentCombobox>

<h2>Forced positions</h2>

<h3>Combobox with forced position above</h3>
<FluentCombobox id="combobox-with-forced-position-above" Position="Position.Above">
    <FluentOption>Position forced above</FluentOption>
    <FluentOption>Option Two</FluentOption>
</FluentCombobox>

<h3>Combobox with forced position below</h3>
<FluentCombobox id="combobox-with-forced-position-below" Position="Position.Below">
    <FluentOption>Position forced below</FluentOption>
    <FluentOption>Option Two</FluentOption>
</FluentCombobox>
